<ui:composition template="templateProveedor.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"> 

	<ui:define name="cdRegistro">
		<style>		
			.ui-widget-content { border: none; padding: 5px; }			
			.ui-widget-content tr td { border: none; color: #00708C; font-family: 'Lato',sans-serif; }
			.ui-button { padding:0px; }
			/* Importante! es para que no muestre el nombre del tipo de elemento en los botones de primefaces */
			.ui-button-text { display: none; }			
			/* Importante! es para que queden los iconos en los botones de primefaces */
			.ui-widget select, .ui-widget button { font-family: 'Glyphicons Halflings'; }
			/* Deja transaprente el form de subida de archivos */
			.ui-fileupload-buttonbar, .ui-widget-header, .ui-corner-top, .ui-fileupload-content, .ui-widget-content { background-color:transparent; }
		</style>
		
		<div class="well">
		
			<h:form enctype="multipart/form-data" id="form" styleClass="bs-example form-horizontal">
					
				<fieldset>
				
				<h1><legend>Contenido Digital   ·   Modificar</legend></h1>
												
				<p:growl id="mensajes" showDetail="false" life="2000" sticky="true" autoUpdate="true"/>
	
				<div class="form-group">
					<h:outputLabel value="Logo " styleClass="control-label col-lg-2"/>
					<div class="col-lg-6 row-lg-3">
						<div class="input-group pull-left">
							<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>					
							<p:fileUpload fileUploadListener="#{utilsBean.subirImagen}"
										allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
										update="mensajes" sizeLimit="10000000" auto="true" multiple="false"
										cancelLabel="Cancelar" label="Seleccionar" uploadLabel="Confirmar"
										fileLimit="1" dragDropSupport="true" 
										fileLimitMessage="Puede Ingresar soloamente 1 logo">
										
								<p:graphicImage value="/Imagenes/Logos/#{contenidoDigitalBean.nombre}"
												styleClass="media-object logo pull-left"
												width="100" height="100" id="imgAdmin"
												style="margin: 10px; border: 2px solid #333333;"/>
											
							</p:fileUpload>
						</div>
					</div>				
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Nombre " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-font"></span></span>
							<p:inputText label="Nombre" placeholder="Nombre" styleClass="form-control" 
										required="true" requiredMessage="Debe ingresar el nombre del Contenido Digital"
										value="#{contenidoDigitalBean.nombre}" />
						</div>
					</div>
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Descripcion" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-font"></span></span>
							<p:inputTextarea label="Descripcion" placeholder="Descripcion" styleClass="form-control"
											required="true" requiredMessage="Debe ingresar la descripcion del Contenido Digital"
											value="#{contenidoDigitalBean.descripcion}" />
						</div>
					</div>
				</div>
	
				<div class="form-group">		            
			  		<h:outputLabel value="Subcategoria " styleClass="control-label col-lg-2"/>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-list"></span></span>
							<h:selectOneMenu label="Subcategoria" id="subcat" 
											value="#{contenidoDigitalBean.subcategoria.nombre}" effect="fade" styleClass="form-control"
											required="true" requiredMessage="Debe seleccionar la subcategoria del Contenido Digital" >
								<f:selectItem itemLabel="#{contenidoDigitalBean.subcategoria.nombre}" itemValue="#{contenidoDigitalBean.subcategoria.nombre}" />
					            <f:selectItems value="#{subcategoriaBean.subcategorias}" var="sc" itemLabel="#{sc.nombre}" itemValue="#{sc.nombre}" />
					        </h:selectOneMenu>
				        </div>
					</div>
			        <h:outputLabel value="Filtrar por Categoria: " styleClass="control-label col-lg-2"/>
					<div class="col-lg-3">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
				            <h:selectOneMenu label="Categoria" id="categoria" value="#{subcategoriaBean.categoria.nombre}" effect="fade" styleClass="form-control">
				            	<f:selectItem itemLabel="Seleccionar Categoria..." itemValue="" />
				                <f:selectItems value="#{subcategoriaBean.categoriasConSubcategorias}" var="categoria" itemLabel="#{categoria.nombre}" itemValue="#{categoria.nombre}"/>
				                <p:ajax update="subcat" listener="#{subcategoriaBean.getSubcategoriasPorCategoria}" />
				            </h:selectOneMenu>
						</div>
					</div>
				</div>
	
				<div class="form-group">
					<h:outputLabel value="Imaganes... " styleClass="control-label col-lg-2"/>
					<div class="col-lg-8 row-lg-3">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>
							<p:fileUpload fileUploadListener="#{utilsBean.subirMultiplesImagenes}"
											allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
											update="mensajes" sizeLimit="10000000" auto="false" dragDropSupport="true"
											multiple="true" fileLimit="5"
											cancelLabel="Cancelar" label="Seleccionar" uploadLabel="Confirmar" 
											fileLimitMessage="Puede Ingresar soloamente 5 imaganes" />
						</div>
					</div>
				</div>
				
				<div class="form-group">
					<h:outputLabel value="Link video" styleClass="control-label col-lg-2"/>
					<div class="col-lg-8">
						<div class="input-group" >
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-film"></span>
								<span style="font-family: 'Lato'; font-size: 9px; padding:10px;"> http://www.youtube.com/watch?v= </span>
							</span>
							<p:inputText label="Video" value="#{contenidoDigitalBean.video}" placeholder="Video..." styleClass="form-control" />
						</div>
						<div style="font-size:10px; text-align:right;"><h:outputLabel>Si el link es: http://www.youtube.com/watch?v=47dtFZ8CFo8, debe ingresar 47dtFZ8CFo8</h:outputLabel></div>
					</div>
					
				</div>
	
	
				<div class="form-group" style="text-align:center; margin: auto;">
					<br />
					<a href="#{request.contextPath}/index.xhtml" style="margin: 20px;"><button class="btn btn-default btn-lg">Cancelar</button></a>					
		         	<h:commandButton id="registro" value="Modificar" update="mensajes"
			             actionListener="#{contenidoDigitalBean.postModificarContenidoDigital}" styleClass="btn btn-primary btn-lg"/>
				</div>
			             
				</fieldset>
			
			</h:form>
		</div>
	
	</ui:define>
</ui:composition>